<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>景点详情</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="Your description"/>
    <meta name="keywords" content="Your keywords"/>
    <meta name="author" content="Your name"/>
    <!-- CSS Style -->
    <link rel="stylesheet" th:href="@{/css/style1.css}">
    　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>


    <script  type="text/javascript" th:inline="javascript">
        var pageNumber=[[${number}]];
        var first=[[${first}]];
        var last=[[${last}]];
        var totalPages=[[${totalPages}]]
        var html='<li class="active"><a th:if="${not first}" th:href="@{/dist/search(topic=${topic},start=${number-1})}">Previous</a>&nbsp;&nbsp;';

        var bo="";
        /*<![CDATA[*/
        /*for (var i=2;i<=totalPages;i++){
           // bo+='<li class="li"><a href="" onclick="page(i)">'+i+'</a>&nbsp;&nbsp;';
        }*/
        /*]]>*/
        html=html+bo+'<li class="next"><li class="active"><a th:if="${not last}" th:href="@{/dist/search(topic=${topic},start=${number+1})}">Next</a>&nbsp;&nbsp;'


        $(function() {
            var currentPage = 1;
            var totalPages = 2;
            $("#page").bootstrapPaginator({
                bootstrapMajorVersion: 3, //对应的bootstrap版本
                currentPage: currentPage, //当前页数
                numberOfPages: 10, //每次显示页数
                totalPages: totalPages, //总页数
                shouldShowPage: true, //是否显示该按钮
                useBootstrapTooltip: true,
                onPageClicked: function(event, originalEvent, type, page) {
                    console.log(page);
                }
            });
        });






    </script>

</head>

<body class="single-product-page">


<!-- head 头部 -->
<div id="head" th:include="common/index_header :: copyheader"></div>
<br>
<!-- Main Container -->
<section class="main-container col1-layout">
    <div class="main">
        <div class="container">

                <div  class="row" id="table_refresh">
                    <div>
                        <div class="col-sm-12" th:each="attr : ${attrs}">
                         <div style="padding: 5px;border-bottom: 1px solid black">
                             <a th:href="@{/dist/articleDetail(id=${attr.id})}" th:text="${attr.topic}">
                             </a>
                         </div>
                            <br>
                            <!--分页-->
                        </div>
                    </div>
                    <div class="pager_wrapper">
                        <ul class="pager clearfix" id="pages">
                            <li class="prev"><a th:if="${not first}" th:href="@{/dist/search(topic=${topic},start=${number -1})}">Previous</a></li>
                            <li class="next"><a th:if="${not last}" th:href="@{/dist/search(topic=${topic},start=${number+1})}">Next</a></li>
                        </ul>
                    </div>
                </div>
        </div>
    </div>
</section>


<br>
<!--底部-->
<div th:include="common/index_footer :: copyfooter"></div>


<script th:src="@{/js2/owl.carousel.min.js}"></script>
<script th:src="@{/js2/main.js}"></script>





</body>
</html>